<template>
  <view class="my-wallet">
    <view
      class="staging-top"
      :style="{
        width: '100%',
        height: '630rpx',
        background: `url(${seizeOrdersTop}) no-repeat center`,
        backgroundSize: 'cover',
      }"
    >
      <u-icon
        name="arrow-left"
        color="#ffffff"
        size="20"
        class="go-back"
        @click="goBack()"
      ></u-icon>
      <view class="nav-bar">
        <view class="nav-title">我的钱包</view>
      </view>
      <view class="wallet-container">
        <view class="wallet-infor">
          <view class="title">可提现余额(元)</view>
          <view class="price-num">3980.00</view>
          <view class="income-infor">
            <view class="income-item">
              <view class="title">近30天收入(元)</view>
              <view class="num">3980.0</view>
            </view>
            <view class="income-item">
              <view class="title">账户余额(元)</view>
              <view class="num">660.0</view>
            </view>
            <view class="income-item">
              <view class="title">待入账(元)</view>
              <view class="num">200.0</view>
            </view>
          </view>
          <view class="btn" @click="$showNoAuthMsg()">去提现</view>
        </view>
      </view>
    </view>
    <view class="item-container">
      <view class="item" @click="$showNoAuthMsg()">
        <view class="image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="runningBillIcon"
            width="48rpx"
            height="48rpx"
          ></u--image>
        </view>
        <view class="title">流水账单</view>
        <u-icon name="arrow-right" color="#CECECE" size="16"></u-icon>
      </view>
      <view class="item item-last" @click="$showNoAuthMsg()">
        <view class="image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="catIcon"
            width="48rpx"
            height="48rpx"
          ></u--image>
        </view>
        <view class="title">银行卡</view>
        <u-icon name="arrow-right" color="#CECECE" size="16"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import seizeOrdersTop from "@/static/images/seize_orders_top.png";
import runningBillIcon from "@/static/iconImages/running-bill-icon.png";
import catIcon from "@/static/iconImages/cat-icon.png";

export default {
  data() {
    return {
      seizeOrdersTop,
      runningBillIcon,
      catIcon,
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      let pageList = getCurrentPages();
      console.log(pageList);
      if (pageList.length > 1) {
        uni.navigateBack();
      } else {
        uni.switchTab({
          url: "/pages/tabBar/mine/index",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-wallet {
  .staging-top {
    position: relative;
    .go-back {
      position: absolute;
      left: 20rpx;
      top: 20rpx;
    }
    .nav-bar {
      height: 88rpx;

      padding: 0 32rpx;
      display: flex;
      justify-content: space-between;
      .nav-title {
        color: #fff;
        text-align: center;
        flex: 1;
        font-weight: 700;
        font-size: 16px;
        line-height: 88rpx;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .wallet-container {
      position: absolute;
      left: 2%;
      top: 138rpx;
      width: 96%;
      height: 570rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .wallet-infor {
        padding: 44rpx 36rpx;
        .title {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #999999;
          line-height: 44rpx;
          text-align: center;
        }
        .price-num {
          font-size: 80rpx;
          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          text-align: center;
          padding: 20rpx 0 40rpx 0;
        }
        .income-infor {
          height: 130rpx;
          background: #ffffff;
          border-radius: 16rpx;
          display: flex;
          justify-content: space-between;
          padding: 30rpx 0rpx;
          .income-item {
            text-align: center;
            width: 33.3%;
            .title {
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #808080;
              line-height: 76rpx;
            }
            .num {
              font-size: 38rpx;
              font-family: Source Han Sans CN-Medium, Source Han Sans CN;
              font-weight: 500;
              color: #353535;
              line-height: 44rpx;
            }
          }
        }
        .btn {
          width: 60%;
          height: 88rpx;
          background: #457ef6;
          border-radius: 12rpx;
          font-size: 32rpx;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #ffffff;
          line-height: 88rpx;
          text-align: center;
          margin: 0 auto;
        }
      }
    }
  }
  .item-container {
    margin: 96rpx 20rpx 20rpx 20rpx;
    padding: 0 22rpx;
    background: #ffffff;
    border-radius: 16rpx;
    .item {
      display: flex;
      justify-content: space-between;
      padding: 26rpx 0;
      border-bottom: 1rpx solid #eeeeee;
      .title {
        flex: 1;
        margin-left: 18rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #353535;
        line-height: 48rpx;
      }
    }
    .item-last {
      border-bottom: none;
    }
  }
}
</style>